import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    ScrollView, StatusBar, TextInput, Modal, RefreshControl, FlatList,
    Keyboard, Alert, Linking
} from 'react-native';
import { WebView } from 'react-native-webview'
// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');
import Styles from './Styles';

import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Football from "../../utils/Football";
import Utils from "../../utils/Utils";

var elements = [];
var weekday = new Array(7);
weekday[0] = "周末";
weekday[1] = "周一";
weekday[2] = "周二";
weekday[3] = "周三";
weekday[4] = "周四";
weekday[5] = "周五";
weekday[6] = "周六";

export default class OrderDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            deatiled: null,
            betImages: [],
            betContent: []
        };
        this.id = null;
        this.type_title = {
            1: ['主胜', '平', '主负'],
            2: ['让胜', '让平', '让负'],
            3: ["1:0", "2:0", "2:1", "3:0", "3:1", "3:2", "4:0", "4:1", "4:2", "5:0", "5:1", "5:2", "胜其他", "0:0", "1:1", "2:2", "3:3", "平其他", "0:1", "0:2", "0:3", "0:4", "0:5", "1:2", "1:3", "1:4", "1:5", "2:3", "2:4", "2:5", "负其他"],
            4: ['0', '1', '2', '3', '4', '5', '6', '7+'],
            5: ['胜-胜', '胜-平', '胜-负', '平-胜', '平-平', '平-负', '负-胜', '负-平', '负-负'],
        }
    }
    static navigationOptions = {
        title: '彩票详情',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 18,
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }

    componentDidMount() {
        const { navigation } = this.props;
        var id = navigation.getParam("id");
        var params = {
            token: Ugame.info.Token,
            id: id
        }
        Httpc.get(REQUEST.GetUserGameOrderDetail, params, (res) => {
            alert(JSON.stringify(res));
            if (res.StatusCode == -2) {
                Ugame.clearInfo();
                this.props.navigation.navigate('Login');
                return;
            }

            if (res.StatusCode == 1) {
                let result = res.Data;
                let betContent = {};
                for (let i = 0; i < result.Data.length; i++) {
                    let Betnumber = result.Data[i].Betnumber;
                    let bet = result.Data[i];

                    if (betContent.hasOwnProperty('Number_' + Betnumber)) {
                        betContent['Number_' + Betnumber].data.push({
                            BetNo: bet.BetNo,
                            Typeid: bet.Typeid
                        });
                    } else {
                        let obj = {
                            Betnumber: bet.Betnumber,
                            IsDan: bet.IsDan,
                            IsWin: bet.IsWin,
                            a_cn_abbr: bet.a_cn_abbr,
                            endtime: bet.endtime,
                            fs_a: bet.fs_a,
                            fs_h: bet.fs_h,
                            h_cn_abbr: bet.h_cn_abbr,
                            l_cn_abbr: bet.l_cn_abbr,
                            sort_num: bet.sort_num,
                            data: [{
                                BetNo: bet.BetNo,
                                Typeid: bet.Typeid
                            }]
                        }
                        betContent['Number_' + Betnumber] = obj;
                    }
                }
                let orderBetContent = [];
                for (let key in betContent) {
                    orderBetContent.push(betContent[key]);
                }
                this.setState({
                    deatiled: result,
                    betContent: orderBetContent
                });
                let betImages = [];
                let images = result.Images;
                if (!!images) {
                    for (let i = 0; i < images.length; i++) {
                        Image.getSize(images[i], (w, h) => {
                            let imgW = width - 24;
                            let imgH = ((width - 24) / w) * h;
                            betImages.push({
                                imgW: imgW,
                                imgH: imgH,
                                image: images[i]
                            });
                            this.setState({
                                betImages: betImages
                            });
                        })
                    }
                }
            }
        });

    }
    renderLoadingView() {
        return (
            <View style={Styles.container}></View>
        );
    }
    renderContentitem = ({ item }) => {
        return (
            <Text style={{ fontSize: 10, color: '#333333', marginLeft: 2,marginRight:2 }}>{this.type_title[item.Typeid][item.BetNo - 1]}</Text>
        );

    }
    renderBetitem = ({ item }) => {
        let { deatiled } = this.state;
        let saiguo = '';
        if (deatiled.State == 4 || deatiled.State == 5 || deatiled.State == 5) {
            if (item.fs_h > item.fs_a) {
                saiguo = '主胜';
            }
            if (item.fs_h == item.fs_a) {
                saiguo = '平';
            }
            if (item.fs_h < item.fs_a) {
                saiguo = '主负';
            }
        }
        return (
            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                <View style={Styles.td}>
                    {item.IsDan == 1 ?
                        <Image resizeMode="cover" style={{ position: 'absolute', top: 0, left: 0 }} source={require('../../image/js_img_ic_shedan.png')} /> :
                        null
                    }
                    <Text style={{ fontSize: 12, color: '#969696' }}>{weekday[new Date(item.endtime).getDay()]} {item.sort_num}</Text>
                    <Text style={{ fontSize: 12, color: '#969696' }}>{item.l_cn_abbr}</Text>
                    <Text style={{ fontSize: 12, color: '#969696' }}>{item.endtime.substr(11, 5)}截止</Text>
                </View>
                <View style={Styles.td}>
                    <Text style={{ fontSize: 12, color: '#333333' }}>{item.h_cn_abbr}</Text>
                    <Text style={{ fontSize: 12, color: '#d0162e' }}>{item.fs_h}:{item.fs_a}</Text>
                    <Text style={{ fontSize: 12, color: '#333333' }}>{item.a_cn_abbr}</Text>
                </View>
                <View style={Styles.td}>
                    <FlatList
                        data={item.data}
                        keyExtractor={(item, index) => index.toString()}
                        horizontal={false}
                        numColumns={4}
                        renderItem={this.renderContentitem}
                    />
                    <Text style={{ fontSize: 12, color: '#333333' }}>

                        {/* {this.type_title[item.Typeid][item.BetNo - 1]} */}
                    </Text>
                </View>
                <View style={Styles.td}>
                    <Text style={{ fontSize: 12, color: '#333333' }}>
                        {saiguo}
                    </Text>
                </View>
            </View>

        );

    }
    _renderImage = (item) => {

    }
    renderImageitem = ({ item }) => {
        if (!!item) {
            return (
                <Image resizeMode="cover" style={{ width: item.imgW, height: item.imgH, marginLeft: 12 }} source={{ uri: item.image }} />
            );
        }

    }
    do_tel = () => {
        let tel = 'tel:' + Ugame.site.phone// 目标电话
        Linking.canOpenURL(tel).then((supported) => {
            if (!supported) {
                console.log('Can not handle tel:' + tel)
            } else {
                return Linking.openURL(tel)
            }
        }).catch(error => console.log('tel error', error))

    }
    do_football = () => {
        this.props.navigation.navigate('FootballGame');
    }
    render() {
        let { deatiled, betImages, betContent } = this.state;
        if (deatiled == null) {
            return this.renderLoadingView();
        }
        //0,未接单，1已接单，未打票 2已打票（通过IsTake 代表已经取票），3已撤单，4未中奖 5已中奖 6已拍奖
        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <ScrollView style={{ width: width, height: height - 200 }}>
                    <View style={{ height: 90, marginBottom: 10, backgroundColor: '#ffffff' }}>
                        <Text style={{ color: '#333333', paddingLeft: 12, width: width, height: 40, lineHeight: 40, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>{deatiled.Title}</Text>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', height: 50 }}>
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                {(deatiled.State == 5 || deatiled.State == 6) ?
                                    <Text style={{ fontSize: 12, color: "#333" }}>
                                        {deatiled.Coin}
                                    </Text> : <Text style={{ fontSize: 12, color: "#333" }}>--</Text>}
                                <Text style={{ fontSize: 10, color: '#969696' }}>中奖金额(元)</Text>
                            </View>
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ fontSize: 12, color: "#333" }}>
                                    {deatiled.State == 0 ? '未接单' : null}
                                    {deatiled.State == 1 ? '出票中' : null}
                                    {deatiled.State == 2 ? '开奖中' : null}
                                    {deatiled.State == 3 ? '已撤单' : null}
                                    {deatiled.State == 4 ? '未中奖' : null}
                                    {deatiled.State == 5 ? '已中奖' : null}
                                    {deatiled.State == 6 ? '已派奖' : null}

                                </Text>
                                <Text style={{ fontSize: 10, color: '#969696' }}>订单状态</Text>
                            </View>
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ fontSize: 12, color: "#333" }}>{deatiled.Coin}</Text>
                                <Text style={{ fontSize: 10, color: '#969696' }}>投注金额(元)</Text>
                            </View>
                        </View>
                    </View>
                    <View style={{ backgroundColor: '#ffffff', padding: 12 }}>
                        <View style={{ height: 40, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                            <Text>投注信息</Text><Text style={{ fontSize: 12, color: "#969696" }}> {deatiled.Name}  {deatiled.SBetRec}注 {deatiled.Mult}倍</Text>
                        </View>
                        <View style={{ borderColor: '#e8e8e8', borderWidth: 0.5 }}>
                            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={Styles.th}>场次</Text>
                                <Text style={Styles.th}>主队VS客队</Text>
                                <Text style={Styles.th}>投注内容</Text>
                                <Text style={Styles.th}>赛果</Text>
                            </View>
                            <FlatList
                                data={betContent}
                                keyExtractor={(item, index) => index.toString()}
                                renderItem={this.renderBetitem}
                            />
                        </View>
                        <Text style={{ color: "#969696", width: width - 24, paddingTop: 10, textAlign: 'center' }}>赔率以实际出票为准</Text>
                    </View>
                    <View style={{ width: width, marginTop: 10, backgroundColor: '#ffffff', paddingLeft: 12, paddingRight: 12, paddingBottom: 10 }}>
                        <Text style={{ borderBottomColor: '#f7f7f7', borderBottomWidth: 0.5, height: 40, color: '#969696', lineHeight: 40 }}>订单详情</Text>
                        <Text style={{ color: '#969696', height: 20, lineHeight: 20, fontSize: 12 }}>订单编号：{deatiled.OrderID}</Text>
                        <Text style={{ color: '#969696', height: 20, lineHeight: 20, fontSize: 12 }}>下单时间：{deatiled.Otime.substr(0, 19)}</Text>
                        <Text style={{ color: '#969696', height: 20, lineHeight: 20, fontSize: 12 }}>出票时间：{deatiled.Ttime.substr(0, 19)}</Text>
                    </View>
                    <FlatList
                        data={betImages}
                        keyExtractor={(item, index) => index.toString()}
                        renderItem={this.renderImageitem}
                    />
                </ScrollView>
                <View style={{ width: width, height: 40, backgroundColor: '#FFFFFF', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                    <TouchableOpacity onPress={() => this.do_tel()}>
                        <View style={{ width: width / 2, height: 40, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ color: '#666666' }}>联系店主</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.do_football()}>
                        <View style={{ width: width / 2, height: 40, backgroundColor: '#d0162e', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ color: '#ffffff' }}>重新投注</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}
